<template>
	<view class="container">

		<view style="margin-top:-50rpx;height: 486rpx; position: relative;margin-bottom: 80rpx;">
			<image src='https://zhoukaiwen.com/img/wccQQP.png' mode='widthFix' class='png'
				style='width:100%;height:486rpx'></image>
			<!--  -->
		</view>


		<view class="cat-menu " style="margin-top: -100rpx; ">

			<view class="cu-item">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<!-- 								<view class="cu-avatar round lg" 
										style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
										</view> -->
						<view class="cu-avatar round lg">
							<image :src="userinfo.avatarUrl" mode="aspectFill" class="cat-head">
							</image>
						</view>
						<view class="content flex-sub">
							<view>{{userinfo.nickName}}</view>
							<!-- 									<view class="text-gray text-sm flex justify-between">
												2019年12月3日
											</view> -->
						</view>

						<view>
							<button class="cu-btn bg-blue" style="margin-right: 30rpx;" @click="login"
								v-show="!userinfo.openid">登陆</button>
						</view>

						<view>
							<button class="cu-btn bg-orange" style="margin-right: 30rpx;" @click="loginOut"
								v-show="userinfo.openid">注销</button>
						</view>

					</view>
				</view>
			</view>
		</view>



		<view class="title-header">
			<view class="title-text">
				❤ 猫 咪 图 鉴 ❤
			</view>
		</view>

		<view class='nav-list margin-top'>
			<navigator open-type="navigate" hover-class='none' :url="'/subPages/' + item.url"
				:class="'nav-li bg-index' + (index+1)" v-for="(item, index) in Template" :key="index">
				<view class="nav-name">{{item.name}}</view>
			</navigator>
		</view>
		
		<view>
			<view class="circle">
				<ul>
					<li style="background-color: #b2d0ff; width: 30rpx; height: 30rpx;"></li>
					<li style="background-color: #cbffd4; width: 35rpx; height: 35rpx;"></li>
					<li style="background-color: #f4d5ff; width: 25rpx; height: 25rpx;"></li>
					<li style="background-color: #bceaff; width: 20rpx; height: 20rpx;"></li>
					<li style="background-color: #c2caff; width: 28rpx; height: 28rpx;"></li>
					
					<li style="background-color: #d7fff2; width: 38rpx; height: 38rpx;"></li>
					<li style="background-color: #ffd3e5; width: 18rpx; height: 18rpx;"></li>
					<li style="background-color: #fff4d9; width: 28rpx; height: 28rpx;"></li>
					<li style="background-color: #f6deff; width: 30rpx; height: 30rpx;"></li>
					<li style="background-color: #ffe6d9; width: 25rpx; height: 25rpx;"></li>
				</ul>
			</view>
		</view>


		
	</view>
</template>

<script>
	import {
		setUserInfo,
		getUserInfo,
		setToken,
		getToken,
		removeUserInfo,
		removeToken
	} from '@/utils/auth';

	export default {
		data() {
			return {
				bubbles: [],
				list: ['#aaffff', '#d7ffe1', '#ffdeff', '#d4d4ff', '#ffd4de', '#f3ffd7'],
				userinfo: {
					nickName: '猫友',
					avatarUrl: '../../static/img/avatar.png',
					openid: null,
				},

				//openid: null,  // openid

				// avatar: 'https://img.kancloud.cn/ac/a6/aca6303f8cd6b3c30217fa4f571c016e_547x484.png'



				Template: [{
						url: 'me/upload',
						name: '图鉴上传',
						color: ''
					},
					{
						url: 'chat/chat',
						name: '猫友链接',
						color: ''
					},
					{
						url: 'me/about',
						name: '关于我们',
						color: ''
					},
					{
						url: 'me/person',
						name: '个人中心',
						color: ''
					}
				],

				timerId: null,

			}
		},





		onReady() {
			this.isLogin() // 判断是否登陆


		},
		onLoad() {


			// this.userinfo = getUserInfo() || {};
			// console.log("ee")
		},


		// destroyed() {
		// 	clearInterval(this.timerId)
		// 	this.timerId = null
		// },


		methods: {
			// 用户登陆
			login() {
				var that = this;
				uni.getUserProfile({
					desc: '获取您的微信信息以授权小程序',
					lang: 'zh_CN',
					success: UserProfileRes => {
						uni.showLoading({
							title: "登录中....",
							mask: true
						})
						console.log("登录中UserProfileRes：", UserProfileRes)

						// 使用官方接口 获取相关数据： loginRes
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {

								// 进行信息存储
								let form = {};
								form.code = loginRes.code; //用户code  注:用户的code每次登录都是随机的，所以不需要进行存储
								form.avatarUrl = UserProfileRes.userInfo.avatarUrl; //用户头像
								form.nickName = UserProfileRes.userInfo.nickName; //用户微信名
								form.gender = UserProfileRes.userInfo.gender; //性别

								// 发送请求给后端  form
								// that.request('wxlogin', form, 'POST').then(wxloginres=>{

								that.$u.api.wxlogin(form).then(wxloginres => {

									console.log("wxloginres: ", wxloginres)

									try {
										if (wxloginres.code == 200 && wxloginres.data
											.state) {

											// 将userinfo重新赋值
											that.userinfo.nickName = wxloginres.data
												.nickName // 昵称

											that.userinfo.openid = wxloginres.data
												.openid // openid

											// 该用户有头像
											// 如果用户头像修改过，那么就加上路径
											if (wxloginres.data.avatarUrl[0] == "/") {
												that.userinfo.avatarUrl = that.myimgurl() +
													wxloginres.data.avatarUrl // 头像回显
												wxloginres.data.avatarUrl = that.userinfo
													.avatarUrl
											} else if (wxloginres.data.avatarUrl != '' &&
												wxloginres.data.avatarUrl != null) {
												that.userinfo.avatarUrl = wxloginres.data
													.avatarUrl // 头像回显
											}
											// 该用户没有头像，就用默认的
											else {
												wxloginres.data.avatarUrl =
													'../../static/img/avatar.png'
											}

											// 判断用户是否被禁用
											if (wxloginres.data.state == '禁用') {
												wxloginres.data.state = false
											}
											// console.log(wxloginres.data.state)

											//存储用户信息					
											setToken(wxloginres.data.openid)
											setUserInfo(wxloginres.data);

											uni.hideLoading();

											uni.showToast({
												icon: "success",
												title: "登陆成功",
												duration: 2000
											})

										} else {
											uni.hideLoading();

											uni.showToast({
												icon: "none",
												title: wxloginres.msg,
												duration: 2000
											})
										}
									} catch (e) {
										//TODO handle the exception
										uni.hideLoading();

										uni.showToast({
											icon: "none",
											title: "登陆失败，请稍后再试！",
											duration: 2000
										})
										console.log('e:', e)

									}
								})

							},
							fail(err) {
								setTimeout(function() {
									uni.hideLoading();
								}, 2000);

								uni.showToast({
									icon: "none",
									title: "登录失败，请重试",
									duration: 2000
								})
								console.log(err)
							}
						});
					},
					fail: err => {
						// console.log("cancel")
						console.log(err)
					}
				})

			},

			// 用户注销
			loginOut() {
				let that = this
				uni.showModal({
					confirmColor: '#f00',
					title: '注销登录提示',
					content: '确定要注销登录吗？',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							//重新赋值
							that.userinfo = {
								nickName: '猫友',
								avatarUrl: '../../static/img/avatar.png',
								openid: null
							}
							removeToken()
							removeUserInfo()
							uni.$u.toast("注销成功，欢迎再来")

						} else if (res.cancel) {
							console.log('用户点击取消');
						} else {
							console.log('用户点击了其他');
						}
					}
				})
			},

			//判断登陆
			isLogin() {
				let userinfo = getUserInfo();
				// console.log("userinfo:",userinfo)
				if (userinfo) {
					this.userinfo = userinfo
				}
				// console.log("this.userinfo:",this.userinfo)

			},


		}
	}
</script>



<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #ebfbff, #ebfbff);

	}
</style>


<style>
	
	
	ul li {
		position: absolute;
		border: 1px solid #fff;
		background-color: #fff;
		list-style: none;
		opacity: 0;
		border-radius: 50% !important;
	}
	
	.circle li {
		bottom: 0;
		left: 15rpx;
		/* 执行动画 */
		animation: circle 8s linear infinite;
	}
	
	.circle li:nth-child(1) {
		left: 650rpx;
		/* 设置动画延迟时间 */
		animation-delay: 1s;
	}
	
	
	.circle li:nth-child(2) {
		left: 100rpx;
		/* 设置动画延迟时间 */
		animation-delay: 1.5s;
	}
	
	.circle li:nth-child(3) {
		left: 450rpx;
		/* 设置动画延迟时间 */
		animation-delay: 2s;
	}
	
	.circle li:nth-child(4) {
		left: 200rpx;
		/* 设置动画延迟时间 */
		animation-delay: 3s;
	}
	
	.circle li:nth-child(5) {
		left: 120rpx;
		/* 设置动画延迟时间 */
		animation-delay: 4s;
	}
	
	.circle li:nth-child(6) {
		left: 630rpx;
		/* 设置动画延迟时间 */
		animation-delay: 5s;
	}
	
	.circle li:nth-child(7) {
		left: 250rpx;
		/* 设置动画延迟时间 */
		animation-delay: 6s;
	}
	
	.circle li:nth-child(8) {
		left: 400rpx;
		/* 设置动画延迟时间 */
		animation-delay: 7s;
	}
	
	.circle li:nth-child(9) {
		left: 550rpx;
		/* 设置动画延迟时间 */
		animation-delay: 0.5s;
	}
	
	.circle li:nth-child(10) {
		left: 650rpx;
		/* 设置动画延迟时间 */
		animation-delay: 1.5s;
	}
	
	
	
	/* 定义动画 */
	
	
	@keyframes circle {
		0% {

			opacity: 1;
			bottom: 0;
			border-radius: 50%;
		}
	
		100% {

			opacity: 0;
			bottom: 90vh;
			border-radius: 50%;
		}
	}
	
	/* 8888888888888888888888888888888888888888888888888 */
	
	
	.cat-head {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}

	.cat-menu {
		background-color: rgba(255, 255, 255, 1);
		width: 85%;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 15rpx;
		margin: auto;
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40upx 0px;
		justify-content: space-between;
	}

	.nav-li {
		padding: 30upx;
		border-radius: 12upx;
		width: 45%;
		margin: 0 2.5% 40upx;
		background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
		font-size: 32upx;
		font-weight: 300;
	}

	.nav-title::first-letter {
		font-size: 40upx;
		margin-right: 4upx;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}

	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}

	.text-light {
		font-weight: 300;
	}

	@keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}

	@-webkit-keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}

	/* 
  2f9bfe 主色蓝
  189eff 配色蓝
  
  0081ff--0070FF 蓝
  CCE6FF--E5F1FF 淡蓝
  39B54A--7FD02B 绿
  D7F0DB--EAF8F5 淡绿
  FBBD08--FFD627 黄
  f37b1d--F39902 橙
  FEF2CE--FEF6E9 淡橙
  1CBBB4--19CF8A 青
  E03997--FF4F94 粉
  8dc63f--9ddb47 橄榄绿
  e54d42--ff3434 红
  a5673f--7F2D00 棕
  6739b6--6F68DF 蓝紫
  */


	.title-header {
		display: flex;
		height: 120rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		/* padding: 40rpx 0 0 0; */
		font-weight: bold;
		background-image: url(https://s1.ax1x.com/2020/09/16/wccswF.png);
		background-size: cover;
	}


	.bg-top {
		background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
		color: #fff;
	}











	.bg-index1 {
		background-color: #F33F5A;
		color: #fff;
	}

	.bg-index2 {
		background-color: #954FF6;
		color: #fff;
	}

	.bg-index3 {
		background-color: #5177EE;
		color: #fff;
	}

	.bg-index4 {
		background-color: #FFC32E;
		color: #fff;
	}

	.bg-index5 {
		background-color: #FF4F94;
		color: #fff;
	}

	.bg-index6 {
		background-color: #0acffe;
		color: #fff;
	}
</style>

<style scoped>
	

	@keyframes move {
		from {
			top: 100%;
		}

		to {
			top: -50%;
		}
	}

	@keyframes fade-out {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}
</style>
<!-- 
这是 CSS 代码，用于定义一个名为 .bubble 的元素样式。

border-radius 属性设置圆角的半径，50% 表示将元素的边框半径设置为宽度的一半，使其看起来像圆形。
position 属性设置元素的定位方式，absolute 表示该元素相对于其父元素进行定位。
animation 属性在元素上定义动画，其中 move 和 fade-out 是两个关键帧动画，8s 和 5s 是动画的持续时间。
@keyframes 表示定义一个关键帧动画。
from 表示在动画开始时的状态。
to 表示在动画结束时的状态。

top 属性设置元素相对于父元素顶部的位置，

因此 from { top: 100%; } 表示动画从完全在父元素之外的位置开始，然后从上方滑动到元素中心，
to { top:-50%; } 表示动画从元素中心滑动到完全在父元素之外的位置。

opacity 属性设置元素的不透明度，

因此 from { opacity: 1; } 表示元素的不透明度从完全不透明开始，
to { opacity:0; } 表示元素逐渐透明，直到完全透明，即从页面中消失。
 -->
